<template>
  <div id="index">
    <a-carousel arrows autoplay>
      <div
        slot="prevArrow"
        slot-scope="props"
        class="custom-slick-arrow"
        style="display: flex; left: 8.7rem; z-index: 1"
      ></div>
      <div
        slot="nextArrow"
        slot-scope="props"
        class="custom-slick-arrow"
        style="display: flex; right: 8.7rem"
      ></div>
      <div
        class="banner"
        data-aos="fade-up"
        data-aos-duration="1000"
        v-for="(img, index) in bannerList"
        :key="index"
      >
        <img :src="imgurl1 + img.image" width="100%" />
      </div>
    </a-carousel>
    <div class="advantage">
      <ul>
        <li>
          <div class="txt1">
            <countTo
              ref="uCountTo1"
              :start-val="0"
              :end-val="2000"
              :duration="3000"
              separator=""
            /><sup>+</sup>
          </div>
          <span class="txt2">项目广泛应用</span>
        </li>
        <li>
          <div class="txt1">
            <countTo
              ref="uCountTo2"
              :start-val="0"
              :end-val="10"
              :duration="3000"
              separator=""
            />亿<sup>+</sup>
          </div>
          <span class="txt2">客户共同选择</span>
        </li>
        <li>
          <div class="txt1">
            <countTo
              ref="uCountTo3"
              :start-val="0"
              :end-val="9000"
              :duration="3000"
              separator=""
              class="uCountTo"
            /><sup>+</sup>
          </div>
          <span class="txt2">覆盖用户人群</span>
        </li>
        <li>
          <div class="txt1">
            <countTo
              ref="uCountTo4"
              :start-val="0"
              :end-val="2000"
              :duration="3000"
              separator=""
              class="uCountTo"
            /><sup>+</sup>
          </div>
          <span class="txt2">数字商品品牌供应商</span>
        </li>
      </ul>
    </div>

    <!--    <div class="company">-->
    <!--      <img src="@/assets/image/company2.png">-->
    <!--    </div>-->

    <!--    <div class="content">-->
    <!--      <div class="titletxt">-->
    <!--        <h5>我们的优势</h5>-->
    <!--        <span>为企业提供数字科技增值服务及精细化用户运营服务</span>-->
    <!--      </div>-->
    <!--    <div class="titletxt">-->
    <!--      <h5>我们提供的服务</h5>-->
    <!--      <span>精准高效营销场景解决方案</span>-->
    <!--    </div>-->
    <!--    <div class="serive">-->
    <!--      <ul>-->
    <!--        <li>-->
    <!--          <img src="@/assets/image/iconimg5.png">-->
    <!--        </li>-->
    <!--        <li>-->
    <!--          <img src="@/assets/image/iconimg6.png">-->
    <!--        </li>-->
    <!--        <li>-->
    <!--          <img src="@/assets/image/iconimg7.png">-->
    <!--        </li>-->
    <!--        <li>-->
    <!--          <img src="@/assets/image/iconimg8.png">-->
    <!--        </li>-->
    <!--      </ul>-->
    <!--    </div>-->
    <!--    <div class="titletxt">-->
    <!--      <h5>精英团队</h5>-->
    <!--      <span>用一流的服务，为客户解决方案</span>-->
    <!--    </div>-->
    <!--    <div class="guide-content">-->
    <!--      <ul class="salesList">-->
    <!--        <li>-->
    <!--          <img src="@/assets/image/sale1.jpg"/>-->
    <!--          <div class="salespan">-->
    <!--            <span style="font-size: 1.6rem;color: #000000;line-height: 2.1rem;">李原</span>-->
    <!--            <span style="font-size: 1.3rem;color: #666666;line-height: 1.7rem;">福利顾问</span>-->
    <!--          </div>-->
    <!--          <div class="salespan1">-->
    <!--            “用数字化弹性福利平台打造专属企业组织发展的福利模式”-->
    <!--          </div>-->
    <!--        </li>-->
    <!--        <li>-->
    <!--          <img src="@/assets/image/sale3.png"/>-->
    <!--          <div class="salespan">-->
    <!--            <span style="font-size: 1.6rem;color: #000000;line-height: 2.1rem;">黄婷</span>-->
    <!--            <span style="font-size: 1.3rem;color: #666666;line-height: 1.7rem;">福利顾问</span>-->
    <!--          </div>-->
    <!--          <div class="salespan1">-->
    <!--            “专为企业福利赋能，让福利更温暖”-->
    <!--          </div>-->
    <!--        </li>-->
    <!--        <li>-->
    <!--          <img src="@/assets/image/sale4.png"/>-->
    <!--          <div class="salespan">-->
    <!--            <span style="font-size: 1.6rem;color: #000000;line-height: 2.1rem;">张则凯</span>-->
    <!--            <span style="font-size: 1.3rem;color: #666666;line-height: 1.7rem;">福利顾问</span>-->
    <!--          </div>-->
    <!--          <div class="salespan1">-->
    <!--            “小认可， 大幸福——看见每个人的闪光点“-->
    <!--          </div>-->
    <!--        </li>-->
    <!--        <li>-->
    <!--          <img src="@/assets/image/sale5.jpg"/>-->
    <!--          <div class="salespan">-->
    <!--            <span style="font-size: 1.6rem;color: #000000;line-height: 2.1rem;">王萱</span>-->
    <!--            <span style="font-size: 1.3rem;color: #666666;line-height: 1.7rem;">福利顾问</span>-->
    <!--          </div>-->
    <!--          <div class="salespan1">-->
    <!--            “激励员工、激活组织，打造正向企业磁场 ，实现企业经营哲学的数字化落地”-->
    <!--          </div>-->
    <!--        </li>-->
    <!--        <li>-->
    <!--          <img src="@/assets/image/sale2.png"/>-->
    <!--          <div class="salespan">-->
    <!--            <span style="font-size: 1.6rem;color: #000000;line-height: 2.1rem;">夏一丁</span>-->
    <!--            <span style="font-size: 1.3rem;color: #666666;line-height: 1.7rem;">福利顾问</span>-->
    <!--          </div>-->
    <!--          <div class="salespan1">-->
    <!--            “真心的对别人产生点兴趣，是推销员最重要的品格”-->
    <!--          </div>-->
    <!--        </li>-->
    <!--      </ul>-->
    <!--    </div>-->

    <!--    <div class="titletxt">-->
    <!--      <h5>合作品牌</h5>-->
    <!--      <span>专业、高效、领军的数字科技服务提供商</span>-->
    <!--    </div>-->
    <!--    <div class="cooper">-->
    <!--      <img src="@/assets/image/company1.png">-->
    <!--    </div>-->
    <!--    <div class="footer-top">-->
    <!--      <div class="licence-code">-->
    <!--        <ul class="nav">-->
    <!--          <li class="active">首页</li>-->
    <!--          <li>产品与服务</li>-->
    <!--          <li>供应链</li>-->
    <!--          <li>新闻中心</li>-->
    <!--          <li>关于我们</li>-->
    <!--          <li>联系我们</li>-->
    <!--        </ul>-->
    <!--        <div>-->
    <!--          <h5 class="about-h55">服务热线</h5>-->
    <!--          <h5>025-85500001</h5>-->
    <!--        </div>-->
    <!--        <div>-->
    <!--          <h5 class="about-h55">企业地址</h5>-->
    <!--          <p class="adress">南京总公司：南京市秦淮区光华路海福巷90-1号 南报文创园</p>-->
    <!--          <p class="adress">徐州分公司：徐州市云龙区和平大道58号万达广场A座12楼</p>-->
    <!--          <p class="adress">淮安分公司：淮安市淮阴区南昌北路9号中业慧谷</p>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
if (process.browser) {
  // 在这里根据环境引入wow.js
  var { WOW } = require("wowjs");
}
export default {
  asyncData({ store, $api }) {
    let sid = store.state.sid;
    return Promise.all([$api.getImgs(sid)])
      .then((res) => {
        store.commit("setImgs", res[0]);
      })
      .catch((err) => {
        throw err;
      });
  },
  data() {
    return {
      icon0: 2,
      icon1: 1,
      icon2: 1,
      imgurl1: "http://47.101.68.212:8218",
    };
  },
  computed: {
    bannerList() {
      return this.$store.state.bannerList;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHandle, true);
    this.$nextTick(() => {
      if (process.browser) {
        // 在页面mounted生命周期里面 根据环境实例化WOW
        new WOW({ animateClass: "animate__animated" }).init();
      }
    });
  },
  scrollHandle() {
    const element = document.getElementById("statistics");
    const elementHeight = element.clientHeight;
    const elementOffsetTop = element.offsetTop;
    const windowHeight = document.documentElement.clientHeight;
    const windowScrollTop = document.documentElement.scrollTop;

    if (
      windowScrollTop <= elementOffsetTop + elementHeight &&
      windowScrollTop >= elementOffsetTop - windowHeight
    ) {
      if (this.isflag == true) {
        this.start();
        this.start1();
        this.start2();
        this.start3();
        this.isflag = false;
      }
    } else {
      this.isflag = true;
    }
  },
  methods: {
    start() {
      this.$refs.uCountTo.start();
    },
    start1() {
      this.$refs.uCountTo1.start();
    },
    start2() {
      this.$refs.uCountTo2.start();
    },
    start3() {
      this.$refs.uCountTo3.start();
    },
    paused() {
      this.$refs.uCountTo.paused();
      this.$refs.uCountTo1.paused();
    },
    reStart() {
      this.$refs.uCountTo.reStart();
      this.$refs.uCountTo1.reStart();
    },
    getIcon(index) {
      if (index == 0) {
        this.icon0 = 2;
        this.icon1 = 1;
        this.icon2 = 1;
      } else if (index == 1) {
        this.icon1 = 2;
        this.icon0 = 1;
        this.icon2 = 1;
      } else {
        this.icon2 = 2;
        this.icon1 = 1;
        this.icon0 = 1;
      }
    },
    showImg(listName, index) {
      console.log("图加载完毕");
      this.$set(this[listName][index], "showImg", true);
    },
  },
};
</script>
<style scoped lang="scss">
#index {
  width: 100%;
  .advantage {
    width: 100%;
    height: 14.5rem;
    background: #f4f5f8;
    align-items: center;
    ul {
      width: 100%;
      height: 14.5rem;
      display: flex;
      align-items: center;
      justify-content: center;

      li {
        width: 26.9rem;
        height: 11.9rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 0.1rem solid #ef633d;

        .txt1 {
          font-size: 4rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
          font-weight: 700;
          text-align: center;
          color: #cd0000;
          margin-bottom: 0.95rem;

          span {
            display: inline-block;
          }
        }

        .txt2 {
          font-size: 1.4rem;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #666666;
          line-height: 2rem;
          display: block;
        }
      }
    }
  }
  .ant-carousel {
    height: 500px;
    line-height: 0px !important;
  }
  .grap {
    width: 100%;
    height: 87.4rem;
    background: linear-gradient(180deg, #f2f3f6, #f7f7fa);
    padding-top: 4.3rem;
    .threepart {
      width: 119rem;
      margin: auto;
      margin-top: 6.1rem;
      margin-bottom: 3rem;
      display: flex;
      justify-content: space-between;
      li {
        img {
          width: 38.7rem;
          height: 28.4rem;
        }
      }
    }
    .iconlist {
      width: 117rem;
      margin: auto;
      display: flex;
      justify-content: space-around;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        div {
          width: 6.5rem;
          height: 6.5rem;
          margin-bottom: 2rem;
          img {
            width: 100%;
          }
        }
        span {
          font-size: 1.8rem;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #747474;
          line-height: 2.5rem;
        }
      }
    }
  }
  .cooper {
    width: 137rem;
    margin: auto;
    margin-top: 3.7rem;

    img {
      width: 100%;
    }
  }
  .banner {
    width: 100%;
  }

  .company {
    width: 115.8rem;
    height: auto;
    margin: auto;

    img {
      width: 100%;
    }
  }

  .serive {
    margin: 2.3rem 0 5.2rem 0;
    ul {
      display: flex;
      justify-content: center;
      align-items: center;

      li {
        img {
          width: 29.3rem;
          height: 33.3rem;
          margin: 0 0.35rem;
        }
      }
    }
  }
  .guide-content {
    margin: 2.3rem 0 5.2rem 0;

    .salesList {
      width: 119rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      li {
        width: 23.4rem;
        height: 46.5rem;
        background: #efefef;
        margin-bottom: 1.8rem;
        img {
          width: 23.4rem;
          height: 36.6rem;
        }
        .salespan {
          padding: 0.4rem 0 0 0.9rem;
          span:first-child {
            font-size: 1.6rem;
            font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #000000;
            line-height: 2.1rem;
          }
          span:last-child {
            font-size: 1.3rem;
            font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #666666;
            line-height: 1.7rem;
          }
        }
        .salespan1 {
          font-size: 1.2rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #666666;
          line-height: 1.9rem;
          margin: 0.6rem 1rem 0 0.8rem;
        }
      }
    }
  }

  .footer-top {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 16rem;
    background: linear-gradient(180deg, #e63f04, #ac0d0d);
    color: #fff;

    .licence-code {
      width: 120rem;
      height: 16rem;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .nav {
        display: flex;

        li {
          font-size: 1.6rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          line-height: 2rem;
          margin-right: 4.1rem;
        }

        .active {
          font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
          font-weight: 700;
        }
      }

      .about-h55 {
        margin: 0rem 0 1.8rem;
      }

      .licence-h5,
      .QR-code-h5 {
        padding-bottom: 1.6rem;
        border-bottom: 1px solid #fff;
        margin: 2rem 0 1.1rem;
      }

      h5 {
        color: #fff;
        font-size: 1.6rem;
        font-weight: 700;
      }

      p {
        margin-bottom: 0.7rem;
        font-size: 1.4rem;
        line-height: 1.9rem;
      }
    }
  }
}
.titletxt {
  width: 117rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  h5 {
    font-size: 2.4rem;
    color: #000000;
    line-height: 3.1rem;
    font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
    font-weight: 700;
    margin-bottom: 0.3rem;
  }
  span {
    font-size: 1.4rem;
    color: #666666;
    line-height: 1.9rem;
  }
}
</style>
